<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>课程展示</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="../static/assets/libs/layui/css/layui.css" th:href="@{/assets/libs/layui/css/layui.css}" media="all"/>
	<link rel="stylesheet" href="../static/assets/css/style.css" th:href="@{/assets/css/style.css}" />
	<link rel="stylesheet" href="../static/assets/css/global.css" th:href="@{/assets/css/global.css}" />
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <!-- 顶部 -->
	<div th:include="common :: headname"></div>
	<div class="layui-banner">
		<div class="layui-carousel" id="test10" style=" margin: auto; text-align: center;" >
		  <div carousel-item>
		    <div><a href="javascript:;"><img src="../static/image/yingyu.jpg" th:src="@{/image/yingyu.jpg}" style="height: 460px" ></a></div>
			  <div><a href="javascript:;"><img src="../static/image/shulihua.jpg" th:src="@{/image/shulihua.jpg}" style="height: 460px"></a></div>
			  <div><a href="javascript:;"><img src="../static/image/shuxue.jpg" th:src="@{/image/shuxue.jpg}" style="height: 460px"></a></div>
		  </div>
		</div>
	</div>
	<!--精品课程-->
	<div class="layui-container" style="width: 1240px;">
	    <div class="layui-row">
		    <div class="layui-col-sm12" style="margin-top: 40px;">
                <h3 class="course_title" style=" line-height: 36px;text-align: center;font-size: 20px;font-weight: 600;color: #4D555D;">
					<img src="../static/assets/images/item.png" th:src="@{/assets/images/item.png}"> 精<span></span>品<span></span>课<span></span>程</h3>
<!--                <:for items="${ggkc}" var="item">-->
                    <div class="layui-col-md3 datagrid-item" th:each="course:${topCourse}">
						<a th:href="@{/course/detail(id=${course.id})}">
						<div class="project-list-item">
							<img class="project-list-item-cover" src="../static/image/shuxue.jpg" th:src="${course.picture}">
							<div class="project-list-item-body">
								<h2 th:text="${course.title}">三角函数</h2>
								<div class="project-list-item-desc">
									作者：<span>[[${course.username}]]</span>
									<div class="head-list">
<!--										<img class="head-list-item" lay-tips="曲丽丽" lay-offset="0,-5px"-->
<!--											 src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png">-->

										<span class="time"><i class="layui-icon layui-icon-log"></i>[[${#dates.format(course.createTime,'yyyy/MM/dd')}]]</span>
								    </div>
							    </div>
						    </div>
						</div>
						</a>
					</div>
<!--                </:for>-->
			</div>
		</div>
	</div>
	<!--专业课程-->
	<div class="layui-container" style="width: 1240px;">
	    <div class="layui-row">
		    <div class="layui-col-sm12">
			    <h3 class="course_title" style="line-height: 36px;text-align: center;font-size: 20px;font-weight: 600;color: #4D555D;">
					<img src="../static/assets/images/item.png" th:src="@{/assets/images/item.png}">专<span></span>业<span></span>课<span></span>程</h3>
<!--                <:for items="${zykc}" var="item">-->
				<div class="layui-col-md3 datagrid-item" th:each="course:${majorCourse}">
					<a th:href="@{/course/detail(id=${course.id})}">
					<div class="project-list-item">
						<img class="project-list-item-cover" src="../static/image/shuxue.jpg" th:src="${course.picture}">
						<div class="project-list-item-body">
							<h2 th:text="${course.title}">三角函数</h2>
							<div class="project-list-item-desc">
								作者：<span>[[${course.username}]]</span>
								<div class="head-list">
									<!--										<img class="head-list-item" lay-tips="曲丽丽" lay-offset="0,-5px"-->
									<!--											 src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png">-->

									<span class="time"><i class="layui-icon layui-icon-log"></i>[[${#dates.format(course.createTime,'yyyy/MM/dd')}]]</span>
								</div>
							</div>
						</div>
					</div>
					</a>
				</div>
<!--                </:for>-->
			</div>
		</div>
	</div>
	<!--免费课程-->
	<div class="layui-container" style="width: 1240px;">
	    <div class="layui-row">
		    <div class="layui-col-sm12">
			    <h3 class="course_title" style="line-height: 36px;text-align: center;font-size: 20px;font-weight: 600;color: #4D555D;">
					<img src="../static/assets/images/item.png" th:src="@{/assets/images/item.png}">免<span></span>费<span></span>课<span></span>程</h3>
<!--                <:for items="${mfkc}" var="item">-->
				<div class="layui-col-md3 datagrid-item" th:each="course:${freeCourses}">
					<a th:href="@{/course/detail(id=${course.id})}">
					<div class="project-list-item">
						<img class="project-list-item-cover" src="../static/image/shuxue.jpg" th:src="${course.picture}">
						<div class="project-list-item-body">
							<h2 th:text="${course.title}">三角函数</h2>
							<div class="project-list-item-desc">
								作者：<span>[[${course.username}]]</span>
								<div class="head-list">
									<span class="time"><i class="layui-icon layui-icon-log"></i>[[${#dates.format(course.createTime,'yyyy/MM/dd')}]]</span>
								</div>
							</div>
						</div>
					</div>
					</a>
				</div>
<!--                </:for>-->
			</div>
		</div>
	</div>
	<!-- js部分 -->
	<div class="fly-footer">
		<p><a href="http://fly.layui.com/" target="_blank">Fly社区</a> 2021 &copy; <a href="http://www.layui.com/" target="_blank">layui.com 出品</a></p>
		<p>
			<a href="http://fly.layui.com/jie/3147/" target="_blank">付费计划</a>
			<a href="http://www.layui.com/template/fly/" target="_blank">获取Fly社区模版</a>
			<a href="http://fly.layui.com/jie/2461/" target="_blank">微信公众号</a>
		</p>
	</div>
	<script type="text/javascript" src="../static/assets/libs/layui/layui.js" th:src="@{/assets/libs/layui/layui.js}"></script>
	<script type="text/javascript" src="../static/assets/js/common.js" th:src="@{/assets/js/common.js}"></script>
	<script>
		layui.use('carousel', function(){
			var carousel = layui.carousel;
			//建造实例
			carousel.render({
				elem: '#test10'
				,width: '100%' //设置容器宽度
				,arrow: 'always' //始终显示箭头
				,height: '480px'
				//,anim: 'updown' //切换动画方式
			});
		});
	</script>
	<script text="text/javascript">
		layui.use('element', function(){
			var element = layui.element;

			//…
		});
	</script>
</body>
</html>


